<template>
  <page class="devicedetail">
    <page-header>
      <x-header :left-options="{backText: ''}">设备详情</x-header>
    </page-header>
    <page-content class="inner" :scroll="true">
      <section v-if="info.deviceType == 1" class="detail">
        <div class="detail-c">
          <p>基本信息</p>
          <div class="detail-l">
            <span class="hui">设备类型：</span>
            <span class="hei">{{info.apiDeviceType}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">主机名称：</span>
            <span class="hei">{{info.apiName}}</span>
          </div>

          <div class="detail-l">
            <span class="hui">统一编号：</span>
            <span class="lan">{{info.mainCode}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">厂家型号：</span>
            <span class="lan">{{info.manufacturerModel.manufacturerModel}}</span>
          </div>

          <!--<div class="detail-l">
            <span class="hui">物料号：</span>
            <span class="lan">{{deviceModel}}</span>
          </div>-->
          <div class="detail-r">
            <span class="hui">生产厂家：</span>
            <span class="hei">{{info.manufacturer.name}}</span>
          </div>

          <div class="detail-l">
            <span class="hui">出厂编号：</span>
            <span class="hei">{{info.leaveFactoryCode}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">出厂时间：</span>
            <span class="hei">{{info.leaveFactoryDate | format('YYYY-MM-DD')}}</span>
          </div>

          <div class="detail-l">
            <span class="hui">设备状态：</span>
            <span class="lv">{{info.apiDeviceStatus}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">主机部件：</span>
            <span class="hei">{{'--'}}</span>
          </div>

          <div class="detail-l">
            <span class="hui">所属主机：</span>
            <span class="hei">{{'----'}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">管辖单位：</span>
            <span class="hei">{{info.manageOffice.name}}</span>
          </div>

          <div class="detail-l">
            <span class="hui">产权单位：</span>
            <span class="hei">{{info.propertyOffice.name}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">产权编号：</span>
            <span class="hei">{{info.propertyCode}}</span>
          </div>

          <p>设备信息</p>
          <div class="detail-l">
            <span class="hui">力矩(吨米)：</span>
            <span class="hei">{{'--'}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">独立高度(米)：</span>
            <span class="hei">{{'--'}}</span>
          </div>

          <div class="detail-l">
            <span class="hui">臂长(米)：</span>
            <span class="hei">{{'--'}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">最大高度(米)：</span>
            <span class="hei">{{'--'}}</span>
          </div>

          <div class="detail-l">
            <span class="hui">最大起重量(吨)：</span>
            <span class="hei">{{'--'}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">整机功率(千瓦)：</span>
            <span class="hei">{{'--'}}</span>
          </div>

          <p>购置信息</p>
          <div class="detail-l">
            <span class="hui">设备单位：</span>
            <span class="hei">{{info.apiDeviceUnit}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">购置日期：</span>
            <span class="hei">{{info.buyDate}}</span>
          </div>

          <div class="detail-l">
            <span class="hui">裸机价格(元)：</span>
            <span class="hei">{{info.bareDevicePrice}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">首次运费(元)：</span>
            <span class="hei">{{info.device.initialFreight}}</span>
          </div>

          <div class="detail-l">
            <span class="hui">平衡重费(元)：</span>
            <span class="hei">{{info.device.balanceCost}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">其他费用(元)：</span>
            <span class="hei">{{info.device.otherCost}}</span>
          </div>

          <div class="detail-l">
            <span class="hui">设备原值(元)：</span>
            <span class="hei">{{info.device.originalVal}}</span>
          </div>
          <div class="detail-r	">
            <span class="hui">&nbsp;</span>
            <span class="hei"></span>
          </div>
          <div class="beizhu">
            <span>备注：</span>
            <span>{{info.remarks}}</span>
          </div>

        </div>
      </section>

      <section v-if="info.deviceType == 2" class="detail">
        <div class="detail-c">
          <p>基本信息</p>
          <div class="detail-l">
            <span class="hui">设备类型：</span>
            <span class="hei">{{info.apiDeviceType}}</span>
          </div>
          <!--<div class="detail-r">
          <span class="hui">主机名称：</span>
            <span class="hei">塔式起重机</span>
        </div>-->

          <div class="detail-l">
            <span class="hui">统一编号：</span>
            <span class="lan">{{info.mainCode}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">厂家型号：</span>
            <span class="lan">{{info.manufacturerModel.id}}</span>
          </div>

          <div class="detail-l">
            <span class="hui">物料号：</span>
            <span class="lan">{{info.deviceModel.deviceModel}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">生产厂家：</span>
            <span class="hei">{{info.manufacturer.name}}</span>
          </div>

          <div class="detail-l">
            <span class="hui">出厂编号：</span>
            <span class="hei">{{info.leaveFactoryCode}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">出厂时间：</span>
            <span class="hei">{{info.leaveFactoryDate || format('YYYY-MM-DD')}}</span>
          </div>

          <div class="detail-l">
            <span class="hui">设备状态：</span>
            <span class="lv">{{info.apiDeviceStatus}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">主机部件：</span>
            <span class="hei">{{'----'}}</span>
          </div>

          <!--<div class="detail-l">
            <span class="hui">所属主机：</span>
            <span class="hei">100</span>
          </div>-->
          <div class="detail-r">
            <span class="hui">管辖单位：</span>
            <span class="hei">{{info.manageOffice.name}}</span>
          </div>

          <div class="detail-l">
            <span class="hui">产权单位：</span>
            <span class="hei">{{info.propertyOffice.name}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">产权编号：</span>
            <span class="hei">{{info.propertyCode}}</span>
          </div>

          <p>设备信息</p>
          <div class="detail-l">
            <span class="hui">力矩(吨米)：</span>
            <span class="hei">{{'--'}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">独立高度(米)：</span>
            <span class="hei">{{'--'}}</span>
          </div>

          <div class="detail-l">
            <span class="hui">臂长(米)：</span>
            <span class="hei">{{'--'}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">最大高度(米)：</span>
            <span class="hei">{{'--'}}</span>
          </div>

          <div class="detail-l">
            <span class="hui">最大起重量(吨)：</span>
            <span class="hei">{{'--'}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">整机功率(千瓦)：</span>
            <span class="hei">{{'--'}}</span>
          </div>

          <p>购置信息</p>
          <div class="detail-l">
            <span class="hui">设备单位：</span>
            <span class="hei">{{info.apiDeviceUnit}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">购置日期：</span>
            <span class="hei">{{info.buyDate}}</span>
          </div>

          <div class="detail-l">
            <span class="hui">裸机价格(元)：</span>
            <span class="hei">{{info.bareDevicePrice}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">首次运费(元)：</span>
            <span class="hei">{{info.device.initialFreight}}</span>
          </div>

          <div class="detail-l">
            <span class="hui">平衡重费(元)：</span>
            <span class="hei">{{info.device.balanceCost}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">其他费用(元)：</span>
            <span class="hei">{{info.device.otherCost}}</span>
          </div>

          <div class="detail-l">
            <span class="hui">设备原值(元)：</span>
            <span class="hei">{{info.device.originalVal}}</span>
          </div>
          <div class="detail-r	">
            <span class="hui">&nbsp;</span>
            <span class="hei"></span>
          </div>
          <div class="beizhu">
            <span>备注：</span>
            <span>{{info.remarks}}</span>
          </div>

        </div>
      </section>

      <section v-if="info.deviceType == 3" class="detail">
        <div class="detail-c">
          <p>基本信息</p>
          <div class="detail-l">
            <span class="hui">设备类型：</span>
            <span class="hei">{{info.apiDeviceType}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">主机名称：</span>
            <span class="hei">{{info.apiName}}</span>
          </div>

          <div class="detail-l">
            <span class="hui">统一编号：</span>
            <span class="lan">{{info.mainCode}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">厂家型号：</span>
            <span class="lan">{{manufacturerModel}}</span>
          </div>

          <!--<div class="detail-l">
            <span class="hui">物料号：</span>
            <span class="lan">{{deviceModel}}</span>
          </div>-->
          <div class="detail-r">
            <span class="hui">生产厂家：</span>
            <span class="hei">{{manufacturer}}</span>
          </div>

          <div class="detail-l">
            <span class="hui">出厂编号：</span>
            <span class="hei">{{info.leaveFactoryCode}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">出厂时间：</span>
            <span class="hei">2012-12-12</span>
          </div>

          <div class="detail-l">
            <span class="hui">设备状态：</span>
            <span class="lv">{{info.apiDeviceStatus}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">主机部件：</span>
            <span class="hei">100</span>
          </div>

          <div class="detail-l">
            <span class="hui">所属主机：</span>
            <span class="hei">100</span>
          </div>
          <div class="detail-r">
            <span class="hui">管辖单位：</span>
            <span class="hei">上海分公司</span>
          </div>

          <div class="detail-l">
            <span class="hui">产权单位：</span>
            <span class="hei">{{info.propertyOffice.name}}</span>
          </div>
          <div class="detail-r">
            <span class="hui">产权编号：</span>
            <span class="hei">{{info.propertyCode}}</span>
          </div>

          <p>购置信息</p>
          <div class="detail-l">
            <span class="hui">设备单位：</span>
            <span class="hei">{{info.apiDeviceUnit}}</span>
          </div>

          <div class="detail-l">
            <span class="hui">设备原值(元)：</span>
            <span class="hei">{{info.device.originalVal}}</span>
          </div>

          <div class="detail-r">
            <span class="hui">&nbsp;</span>
            <span class="hei"></span>
          </div>

          <div class="beizhu">
            <span>备注：</span>
            <span>{{info.remarks}}</span>
          </div>

        </div>
      </section>
    </page-content>
  </page>
</template>

<script>
import { mapGetters } from 'vuex'
import { XHeader } from 'vux'
import { device } from '@service'
// import { deviceDetail } from '@/service/getdata'
export default {
  name: 'DeviceDetails',
  components: {
    XHeader
  },
  computed: {
    ...mapGetters({
      userInfo: 'user/info',
      token: 'user/token'
    }),
    userId () {
      return this.userInfo.id
    }
  },
  data () {
    return {
      info: ''
    }
  },
  methods: {
    async loadData () {
      try {
        let token = this.token
        let id = this.$route.params.id
        let data = await device.info({ token, id })
        this.info = data
        console.log(data)
      } catch (error) {
        console.log(error)
      }
    }
  },
  created () {
    this.loadData()
  }
}
</script>

<style lang="scss" scoped>
.devicedetail {
  .detail {
    min-height: 20.5rem;
    background: #fff;
    border-radius: 6px;
    margin-top: 0.5rem;
    overflow: hidden;
  }

  .detail-c {
    padding-top: 0.5rem;
    padding-left: 0.5rem;
    font-size: 0.8rem;
    padding-right: 1rem;
  }

  .detail p {
    line-height: 1.8rem;
  }

  .detail span {
    line-height: 1.8rem;
  }

  .detail-l {
    float: left;
    width: 50%;
  }

  .detail-r {
    float: right;
    width: 50%;
  }

  .lan {
    color: #1e82d2;
  }

  .lv {
    color: #00ae90;
  }

  .hui {
    color: #606063;
  }

  .hei {
    color: #606063;
  }
}
</style>
